<template>
  <view class="setting-view">
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="data.msgType" cancelText="取消" confirmText="确认" title="注销账号" content="是否注销当前账号,注销后用户记录将清空!" @confirm="dialogConfirm"
        @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <!-- 设置栏 -->
    <view>
      <view class="setting-item" @click="changePwd">
        <text class="setting-tag">密码修改</text>
        <image class="icon-right" src='../../static/img/right.png'></image>
      </view>
     <view class="setting-item" @click="officeCertification">
        <text class="setting-tag">官方认证</text>
        <image class="icon-right" src='../../static/img/right.png'></image>
      </view>
      <view class="setting-item" @click="nullifyAccount">
        <text class="setting-tag">注销账号</text>
        <image class="icon-right" src='../../static/img/right.png'></image>
      </view>
      
    </view>
    <!-- 切换账号和退出登录 -->
    <view class="log-box">
      <view class="log-item" @click="switchAccount">切换账号</view>
      <view class="log-item" @click="logout">退出登录</view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import helper from '../../common/helper';
 
const data = reactive({
  msgType:"",
  mailAccount: helper.getUserMailAccount()
});

function changePwd(){
  console.log("修改密码")
  uni.navigateTo({
    url:`/subpages/userRegister/userRegister?mailAccount=${data.mailAccount}&work=重置密码`
  })
}
//警告窗口
const alertDialog = ref(null)

function dialogToggle(type) {
  data.msgType = type
  alertDialog.value.open()
}
function dialogConfirm() {
  console.log('点击确认')
  //跳转验证验证码
  uni.navigateTo({
    url:`/subpages/userRegister/userRegister?mailAccount=${data.mailAccount}&work=注销账号`
  })
}

function dialogClose(){
  console.log('取消确认')
}

function officeCertification(){
  console.log("官方认证")
  uni.navigateTo({
    url:"/subpages/officialList/officialList"
  })
}

function nullifyAccount(){
  console.log("注销账号")
  dialogToggle("warn")
}

function switchAccount(){
  console.log("切换账号")
  helper.logout()
  uni.navigateTo({
    url:"/subpages/userLogin/userLogin"
  })
}

function logout(){
  console.log("退出登录")
  helper.logout()
  uni.navigateBack()
}
</script>

<style>
.setting-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.setting-item{
  width: 100vw;
  height: 7vh;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 10px;
  border-bottom: 1px solid #c5c5c5;
}
.setting-tag{
  width: 80%;
  font-size: 18px;
}
.icon-right{
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.log-box{
  width: 60vw;
  background-color: #fff;
  margin: auto;
  margin-top: 50vh;
  border-radius: 20px;
}
.log-item{
  padding: 10px;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.log-item:last-child {
  border-bottom: none;
}
</style>
